<template>
    <div id="fmk">
        <el-container>
            <el-header>
                <div class="el-header-area">
                <div class="el-header-img">
                <img src="../../assets/logo.jpg" width="50" height="50">
                </div>
                <div class="el-header-left">天津人民医院预约平台</div>
                <div class="search-area">
                <input class="search-input" type="text" name="search" placeholder="请输入关键字"> 
                <el-button class="search-button" type="primary" round>按医生查找</el-button> <el-button class="search-button" type="primary" round>按科室查找</el-button> 
                </div>
                <div class="login-area">
                <router-link to="/login/pswdlogin" exact> 登录/注册</router-link>
                </div>
                <div class="hlpe-area">
                帮助中心
                </div>
                </div>
                </el-header>
            <el-main>
                <div class="box">
                    <div class="jieShao">
                        <div class="jieShao1">
                             内分泌科
                        </div>
                        <div class="jieShao2">
                             天津市人民医院内分泌科成立于1984年，现共有2个专科病房（72张床位）、内分泌科实验室、内分泌专科门诊和糖尿病教育中心。
                             现有博士生导师3名，硕士生导师5名。是目前国内最大的集医疗、教学、科研、保健于一体的内分泌中心之一。
                             科室具共有高级专业技术职称人员16名，中级专业技术职称人员5名。学术带头人潘长玉、李江源、
                             陆菊明和母义明教授为国内著名内分泌学专家。
                        </div>
                    </div>
                    <div class="bj" :style="bj">
                       
                    </div>
                </div>
                <div class="titleHead">
                    <div class="title1">
                        医生/专家
                    </div>
                    <div class="title2">
                        擅长疾病
                    </div>
                    <div class="title3">
                        出诊时间
                    </div>
                </div>
                <div class="content">
                    <div class="doctPict" :style="doctPict">
                         
                    </div>
                    <div class="doctInfo">
                       <el-row>
                        <el-col :span="5"><div class="grid-content bg-purple">曾勇</div></el-col>
                        <el-col :span="19"><div class="grid-content bg-purple-light">（主治医师，教授）</div></el-col>
                       </el-row>
                       <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-light">心内科</div></el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-light">擅长：冠心病介入治疗及心脏超声诊断</div></el-col>
                      </el-row>
                      <el-row>
                        <div class="but1">冠心病（147）</div>
                        <div class="but1">心脏病（88）</div>
                      </el-row>

                    </div>
                    <div class="doctTime">
                         <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="time"
                            label=""
                            width="35">
                            </el-table-column>
                            <el-table-column
                            prop="mon"
                            label="周一"
                            width="77">
                            </el-table-column>
                            <el-table-column
                            prop="tus"
                            label="周二"
                            width="77">
                            </el-table-column>
                            <el-table-column
                            prop="wen"
                            label="周三"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="wen"
                            label="周三"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Thu"
                            label="周四"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Fri"
                            label="周五"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Sat"
                            label="周六"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="San"
                            label="周日"
                            width="75">
                            </el-table-column>
                        </el-table>
                        <div class="but2">在线咨询</div>
                        <div class="but3"  @click="dialogVisible = true">预约挂号</div>
                           <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">
                                 <el-dialog
                                    width="30%"
                                    title="预约号已放送至您的手机,请注意查收"
                                    :visible.sync="innerVisible"
                                    append-to-body>
                                 </el-dialog>
                               <div class="yy">
                                   <div class="yy1">专家门诊</div>
                                    <div class="yy2">6月26日（周三）</div>
                                     <div class="yy3">下午</div>
                                      <div class="yy4"  @click="innerVisible = true"> 
                                          立即预约
                                      </div>
                               </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                           </el-dialog>


                    </div>
                </div>
                 <div class="content">
                    <div class="doctPict" :style="doctPict">
                         
                    </div>
                    <div class="doctInfo">
                       <el-row>
                        <el-col :span="5"><div class="grid-content bg-purple">曾勇</div></el-col>
                        <el-col :span="19"><div class="grid-content bg-purple-light">（主治医师，教授）</div></el-col>
                       </el-row>
                       <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-light">心内科</div></el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-light">擅长：冠心病介入治疗及心脏超声诊断</div></el-col>
                      </el-row>
                      <el-row>
                        <div class="but1">冠心病（147）</div>
                        <div class="but1">心脏病（88）</div>
                      </el-row>

                    </div>
                    <div class="doctTime">
                         <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="time"
                            label=""
                            width="35">
                            </el-table-column>
                            <el-table-column
                            prop="mon"
                            label="周一"
                            width="77">
                            </el-table-column>
                            <el-table-column
                            prop="tus"
                            label="周二"
                            width="77">
                            </el-table-column>
                            <el-table-column
                            prop="wen"
                            label="周三"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="wen"
                            label="周三"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Thu"
                            label="周四"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Fri"
                            label="周五"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Sat"
                            label="周六"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="San"
                            label="周日"
                            width="75">
                            </el-table-column>
                        </el-table>
                        <div class="but2">在线咨询</div>
                        <div class="but3"  @click="dialogVisible = true">预约挂号</div>
                           <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">
                                 <el-dialog
                                    width="30%"
                                    title="预约号已放送至您的手机,请注意查收"
                                    :visible.sync="innerVisible"
                                    append-to-body>
                                 </el-dialog>
                               <div class="yy">
                                      <div class="yy1">专家门诊</div>
                                      <div class="yy2">
                                          <!-- aa
                                           <span class="demonstration">默认</span>
                                            <el-date-picker
                                                v-model="value1"
                                                type="date"
                                                placeholder="选择日期">
                                            </el-date-picker> -->
                                      </div>
                                      <div class="yy3">下午</div>
                                      <div class="yy4"  @click="innerVisible = true"> 
                                          立即预约
                                      </div>
                               </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                           </el-dialog>

                        

                    </div>
                </div>
                 <div class="content">
                    <div class="doctPict" :style="doctPict">
                         
                    </div>
                    <div class="doctInfo">
                       <el-row>
                        <el-col :span="5"><div class="grid-content bg-purple">曾勇</div></el-col>
                        <el-col :span="19"><div class="grid-content bg-purple-light">（主治医师，教授）</div></el-col>
                       </el-row>
                       <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-light">心内科</div></el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-light">擅长：冠心病介入治疗及心脏超声诊断</div></el-col>
                      </el-row>
                      <el-row>
                        <div class="but1">冠心病（147）</div>
                        <div class="but1">心脏病（88）</div>
                      </el-row>

                    </div>
                    <div class="doctTime">
                         <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="time"
                            label=""
                            width="35">
                            </el-table-column>
                            <el-table-column
                            prop="mon"
                            label="周一"
                            width="77">
                            </el-table-column>
                            <el-table-column
                            prop="tus"
                            label="周二"
                            width="77">
                            </el-table-column>
                            <el-table-column
                            prop="wen"
                            label="周三"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="wen"
                            label="周三"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Thu"
                            label="周四"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Fri"
                            label="周五"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="Sat"
                            label="周六"
                            width="77">
                            </el-table-column>
                             <el-table-column
                            prop="San"
                            label="周日"
                            width="75">
                            </el-table-column>
                        </el-table>
                        <div class="but2">在线咨询</div>
                         <div class="but3"  @click="dialogVisible = true">预约挂号</div>
                           <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">
                                 <el-dialog
                                    width="30%"
                                    title="预约号已放送至您的手机,请注意查收"
                                    :visible.sync="innerVisible"
                                    append-to-body>
                                 </el-dialog>
                               <div class="yy">
                                   <div class="yy1">专家门诊</div>
                                    <div class="yy2">6月26日（周三）</div>
                                     <div class="yy3">下午</div>
                                      <div class="yy4"  @click="innerVisible = true"> 
                                          立即预约
                                      </div>
                               </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                           </el-dialog>


                    </div>
                </div>
                <div class="pageInfo">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
                    </el-pagination>
                </div>
            </el-main>
            <el-footer>
                <div class="top">
                    <div class="top1">友情链接</div>
                    <div class="top2">
                        <el-link :underline="false">天津海河医院网上挂号</el-link>
                        <el-link :underline="false">天津医院网上挂号</el-link>
                        <el-link :underline="false">天津肿瘤医院网上挂号</el-link>
                        <el-link :underline="false">天津医科大学医院网上挂号</el-link>
                        <el-link :underline="false">天津儿童医院网上挂号</el-link>
                        <el-link :underline="false">天津市眼科医院网上挂号</el-link>
                        <el-link :underline="false">天津市中心妇产科医院网上挂号</el-link>
                         <el-link :underline="false">天津市南开医院网上挂号</el-link>
                         <el-link :underline="false">天津市第一中心医院</el-link>
                         <el-link :underline="false">天津中医药大学第一附属医院</el-link>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bottom1">
                        <div class="bottom11" :style="bottom11"></div>
                        <div class="bottom12">天津市人民医院</div>
                    </div>
                    <div class="bottom2">
                        <div class="bottom22">
                            版权信息   备案ICP备12040220号-2
                            互联网药品信息服务资格证书 证书编号：（津）-经营性-2015-0002
                            COPYIGHT2010-2019 本网站解释权归 天津市人民医院所有
                        </div>
                    </div>
                    <div class="bottom3">
                        <div class="bottom3m">
                            <div class="bottom31">
                                <div class="bottom311" :style="bottom311"></div>
                                <div class="bottom312">
                                    E-MAIL:<br>
                                    market@mingyihui.net
                                </div>
                            </div>
                           <div class="bottom31">
                                <div class="bottom311" :style="bottom32"></div>
                                <div class="bottom312">
                                     法律顾问:<br>
                                    北京市盈科（广州）事务所
                                </div>
                            </div>
                        </div>
                    </div>
            
                </div>
            </el-footer>
        </el-container>

         
    </div>
</template>
<script>
export default {
    data(){
        return{
               pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        innerVisible: false,
        value: [],
        dialogVisible: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
            bj:{
                backgroundImage:"url("+require('../../assets/hospital.jpg')+")",
                backgroundRepeat:"no-repeat",
                backgroundSize:'100% 100%'
            },
            doctPict:{
                backgroundImage:"url("+require('../../assets/doct2.jpg')+")",
                backgroundRepeat:"no-repeat",
                backgroundSize:'100% 100%'
            },
            bottom11:{
                 backgroundImage:"url("+require('../../assets/logo.jpg')+")",
                backgroundRepeat:"no-repeat",
                backgroundSize:'100% 100%'
            },
            bottom311:{
                backgroundImage:"url("+require('../../assets/email.png')+")",
                backgroundRepeat:"no-repeat",
                backgroundSize:'100% 100%',
            },
            bottom32:{
                backgroundImage:"url("+require('../../assets/law.png')+")",
                backgroundRepeat:"no-repeat",
                backgroundSize:'100% 100%'
            },
            tableData: [{
            time:'上午',
            Mon: '专家门诊（7元）',
            Fri: '专家门诊（7元）',
        },
        {
            time:'下午',
            Thu: '专家门诊（7元）'
           
        }]
        }
    },
        methods: {
            handleChange(value) {
                console.log(value);
            },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
      }
    }
    }

</script>
<style>

.yy{
    height: 200px;
    width: 200px;
    /* background-color: #b71c1c; */
    border: 1px solid #4dd0e1;
    border-radius: 5px;
    margin-left: 80px;
    color: black;
}
:hover.yy{
    border: #b71c1c 1px solid;
}
.yy1{
    height: 50px;
    /* background-color: green; */
    line-height: 70px;
    font-size: 16px;
}
.yy2{
    height: 50px;
    /* background-color:gold; */
    line-height: 70px;
    font-size: 18px;
    font-weight: 500;
}
.yy3{
    height: 50px;
    /* background-color: green; */
    line-height: 70px;
    font-size: 16px;
}
.yy4{
    height: 50px;
    background-color: #4dd0e1;
    line-height: 50px;
    font-size: 16px;
}
:hover.yy4{
   background-color: #b71c1c;
}
.pageInfo{
    margin-top: 10px;
}
.bottom3m{
    padding-top: 10px;
   width: 240px;
   height: 120px;
   /* background-color: pink; */
   margin-left: 60px;
}
.bottom31{
    height: 60px;
    width: 250px;
    /* background-color: #00bcd4; */
}
.bottom311{
    float: left;
    height: 40px;
    width: 40px;
    font-size: 13px;
}
.bottom312{
    float: left;
     height: 40px;
     width: 200px;
     text-align: left;
     margin-left: 5px;
     /* background-color: orange; */
}
.top{
    /* background-color: #b71c1c; */
    height: 110px;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}
.top1{
  /* background-color: aqua; */
  height: 40px;
  font-size: 18px;
  padding-top: 10px;
  padding-left: 10px;
  text-align: left;
  color: #b71c1c
}
.top2{
    height: 60px;
    padding-left: 20px;
    text-align: left;
    /* background-color: gold; */
}
.bottom{
    border-bottom: 1px black solid;
   height: 160px;
   /* background-color: #b71c1c; */
}
.bottom1{
    margin-top: 20px;
    padding-left: 20px;
    float: left;
    height: 120px;
    width: 350px;
    /* background-color: greenyellow; */
}
.bottom11{
    height: 120px;
    width: 120px;
    float: left;
}
.bottom12{
    margin-left: 10px;
    padding-top: 30px;
    width: 200px;
    height: 120px;
    float: left;
    font-size: 26px;
    font-weight: 500;
    text-align: left;
}
.bottom2{
    margin-top: 20px;
    padding-top: 20px;
    float: left;
     height: 120px;
     width: 550px;
     /* background-color: blueviolet; */
     border-left: 1px #9e9e9e solid;
     border-right: 1px #9e9e9e solid;
}
.bottom22{
    height: 120px;
    width: 300px;
    margin-left: 120px;
    font-size: 15px;
}
.bottom3{
    margin-top: 20px;
    float: left;
     height: 120px;
     width: 350px;
     /* background-color: green; */
}
.but2{
   border: #b71c1c 1px solid;
   border-radius: 5px;
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  float: left;
  margin-top: 5px;
  margin-right: 100px;
  margin-left: 140px;
  color: #b71c1c;
}
.but3{
  background-color: #b71c1c;
   border-radius: 5px;
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  float: left;
  margin-top: 5px;
  
  color: white;
}
.but1{
  border: #b71c1c 1px solid;
  width: 85px;
  font-size: 12px;
  float: left;
  margin-left: 5px;
  color: #b71c1c;
}
  .el-row {
    margin-bottom: 5px;
    margin-left: 5px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
      text-align: right;
    /* background: #d3dce6; */
  }
  .bg-purple-light {
      text-align: left;
      line-height: 20px;
    /* background: #e5e9f2; */
    font-size: 10px;
  }
 .el-header {
background-color: #ffffff;
color: #333;
text-align: center;
line-height: 80px;
font-family: "STXingkai";
font-size: 30px;
position: relative;
right: 150px;
}
.el-main{
    margin-top: 30px;
    border-top: red 3px solid;
}
.el-header-left {
position: absolute;
left: 230px;
}
.el-header-img {
position: absolute;
left: 170px;
top: 10px;
}
.search-area{
width: 580px;
position: absolute;
left: 500px;
font-family: 'Microsoft YaHei';
font-size: 10px;
}

.search-button{
width: 90px;
height: 30px;
font-size: 5px;


}
.search-input{
/* width: 260px; */
border: 1px solid #e2e2e2;
height: 30px;
background-image: url(../../assets/sousuo.svg);
background-repeat: no-repeat;
background-size: 25px;
background-position:5px center;
padding:0 0 0 40px;
} 
.login-area{
position: absolute;
right: 30px;
font-family: 'Microsoft YaHei';
font-size:18px;
color: #80d8ff;
}

.hlpe-area{
position: absolute;
right: -50px;
font-family: 'Microsoft YaHei';
font-size:18px;
color: #80d8ff;
}
.box{
    height: 300px;
    width: 1050px;
    /* background-color: brown; */
    margin-left: 120px;
}
.bj{
    width: 600px;
    height: 300px;
    /* background-color: pink; */
    float: left;
    /* background-image: url("../../asssets/hospital.jpg") */
}
.jieShao{
    height: 300px;
    width: 450px;
    background-color: #42a5f5;
    color: white;
    float: left;
}
.jieShao1{
    height: 60px;
    /* width: 400px; */
    /* background-color: aqua; */
    font-size: 24px;
    font-weight: 500;
    line-height: 60px;
   text-align: left;
   padding-left: 30px;
   padding-top: 20px;
}
.jieShao2{
    height: 239px;
    /* background-color: chocolate; */
    padding-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
}
.titleHead{
    height: 50px;
    width: 1050px;
    background-color: #e0e0e0;
    margin-left: 120px;
    margin-top: 10px;
    font-size: 20px;
}
.title1{
   margin-top: 15px;
   float: left;
   width: 100px;
   /* background-color: aqua; */
   margin-left: 30px;
}
.title2{
    margin-left: 160px;
    margin-top: 15px;
    float: left;
    width: 200px;
    /* background-color: #42a5f5; */
}
.title3{
    margin-left: 250px;
    margin-top: 15px;
    float: left;
    /* background-color: green; */
}
.content{
    position: relative;
    /* padding-top: 5px;
    padding-left: 10px; */
    height: 260px;
    width: 1050px;
    /* background-color:greenyellow; */
    margin-left: 120px;
    margin-top: 10px;
    border-bottom: #333 1px solid;
}
.doctPict{
    position: absolute;
    top: 5px;
    /* left: 10px; */
    height: 250px;
    width: 200px;
    /* background-color: aqua; */
    float: left;
}
.doctInfo{
    position: absolute;
    top: 5px;
    left: 210px;
    height: 200px;
    width: 190px;
    /* background-color: rebeccapurple; */
    float: left;
}
.doctTime{
    position: absolute;
    top: 5px;
    right: 0px;
    height: 300px;
    width: 650px;
    /* background-color: red; */
    float: left;
}

</style>
